<template>
    <div ref="chartContainer" style="height: 400px; width: 100%"></div>
  </template>
  
  <script setup>
  import { onMounted, ref, onBeforeUnmount } from 'vue';
  import Highcharts from 'highcharts';
  import Highcharts3D from 'highcharts/highcharts-3d';
  
  Highcharts3D(Highcharts); // 注册 3D 模块
  
  const chartContainer = ref(null);
  let chart = null;
  
  onMounted(() => {
    if (chartContainer.value) {
      chart = Highcharts.chart(chartContainer.value, {
        chart: {
          type: 'pie',
          options3d: {
            enabled: true,
            alpha: 45, // 控制视角
            beta: 0 // 控制视角
          }
        },
        title: {
          text: '3D 饼图示例'
        },
        plotOptions: {
          pie: {
            innerSize: 100, // 饼图内圆大小
            depth: 45 // 深度
          }
        },
        series: [{
          name: '销量',
          data: [
            ['产品 A', 10],
            ['产品 B', 20],
            ['产品 C', 30],
            ['产品 D', 40]
          ]
        }]
      });
    }
  });
  
  onBeforeUnmount(() => {
    if (chart) {
      chart.destroy();
    }
  });
  </script>
  